<template>
  <el-row>
    <el-col :span="24">
      <span class="mediatitle">图文列表</span>
    </el-col>
    <el-col :span="24">
      <div>
        <div class="imagelist" v-for="(item, index) in mediaExtends.item" :key="item.image.imgid">
          <a href="javascript:;" @click="handleImageSetDetail(index)">
            <el-image
                    :src="item.image.isself == 1 ? item.image.viewurl + '&width=240px' : item.image.viewurl"
                    style="display:block;width:100%;height: 135px"
            />
          </a>
          <div class="image-info">
            <h5 class="title" :title="item.title">{{item.title}}</h5>
            <div class="txtclamp2 desc" title="item.desc">
              {{item.desc}}
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-dialog
          :model-value="dialogVisible"
          :title="dialogTitle"
          width="35%"
          destroy-on-close
          :before-close="handleCancelDialog"
          custom-class="imagesdialog"
  >
    <el-carousel
                 :initial-index="initialIndex"
                 indicator-position="none"
    >
      <el-carousel-item v-for="row in mediaExtends.item" :key=" row.title + row.image.imgid" :label="row.desc" >
          <el-image
                  :src="row.image.isself == 1 ? row.image.viewurl + '&width=400px' : row.image.viewurl"
                  class="image"
          />
          <div style="padding: 14px">
            <div class="bottom">
              <div class="title">{{ row.title }}</div>
              <div class="desc">{{row.desc}}</div>
            </div>
          </div>
      </el-carousel-item>
    </el-carousel>
  </el-dialog>
</template>

<script>
  import {ref} from 'vue'
  export default {
    name: "ImagesetCommon",
    props: {
      mediaExtends: {
        type: Object,
        required: true
      }
    },
    setup() {
      const dialogVisible = ref(false)
      const dialogTitle = ref('')
      const initialIndex = ref(0)
      const handleImageSetDetail = (index) => {
        initialIndex.value = index
        dialogVisible.value = true
      }
      const handleCancelDialog = () => {
        dialogVisible.value = false
      }

      return {
        dialogVisible,
        dialogTitle,
        initialIndex,
        handleImageSetDetail,
        handleCancelDialog
      }
    }
  }
</script>

<style scoped lang="scss">
  .imagelist{
     width: 240px;
     float: left;
     margin-right: 20px;
     margin-bottom: 20px;
    .image-info{
      .desc{font-size: 12px;}
    }

  }
  .title{margin:10px 0 5px;font-size: 14px;font-weight: bold;}
  .image {
    width: 100%;
    display: block;
  }

</style>
<style lang="scss">
  .imagesdialog{
    padding-bottom: 15px;
    .el-dialog__header{
      padding-bottom: 20px;
    }
  }
</style>
